<template>
	<view>
		<view class="content">
			<view class="question-item" v-for="(question,i) in data.question" :key="i">
				<view class="question-title">
					<text>{{question.questionTitle}}</text>
					<text class="operation-icon" @click="editQuestion(i)">&#xe807;</text>
					<text class="operation-icon" @click="addOption(i)">&#xe6ad;</text>
				</view>
				<view class="question-option" v-for="(option, j) in question.optionItems" :key="j">
					<view class="question-option-item">
						<text class="radio-icon">&#xe61c;</text>{{option}}
						<text class="operation-icon" @click="editOption(i,j)">&#xe807;</text>
						<text class="operation-icon" @click="delOption(i,j)">&#xe6b0;</text>
						<text class="operation-icon" v-if="j!=0" @click="moveOption(i,j,-1)">&#xe7f1;</text>
						<text class="operation-icon" v-if="j!=question.optionItems.length-1" @click="moveOption(i,j,1)">&#xe7f2;</text>
					</view>
				</view>
			</view>
			<view class="max">
				<input type="number" v-model="data.con" placeholder="请确定最多投几票" />
			</view>
		</view>
		<view class="footer">
			<view class="iconfont" @click="submit">&#xe65e;</view>
		</view>
		
		<uni-popup ref="questionDialog" type="dialog">
			<uni-popup-dialog mode="input" title="输入内容" :value="questionPlaceholder" placeholder="请输入内容" @confirm="questionConfirm"></uni-popup-dialog>
		</uni-popup>
		<uni-popup ref="optionDialog" type="dialog">
			<uni-popup-dialog mode="input" title="输入内容" :value="optionPlaceholder" placeholder="请输入内容" @confirm="optionConfirm"></uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script>
	import uniPopupDialog from '@/components/uni-popup/uni-popup-dialog.vue'
	export default {
		components: {
			uniPopupDialog,
		},
		data() {
			return {
				data:{
					name:'问题',
					con:'',
					question:[
						{questionTitle:'这里是您的问题',optionItems:['选项一','选项二']},
					]
				},
				// data:{
					// name:'',
					// con:'',
					// question:[]
				// },
				questionPlaceholder:'',
				currentQuestion:0,
				optionPlaceholder: '',
				currentOption:0
			}
		},
		methods: {
			editQuestion(i){
				this.currentQuestion = i // 待修改的问题
				this.questionPlaceholder = this.data.question[i].questionTitle
				this.$refs.questionDialog.open()
			},
			addOption(i){
				this.data.question[i].optionItems.push('新增选项')
			},
			delOption(i,j){
				if(this.data.question[i].optionItems.length==2){
					uni.showModal({
						content:'选项不得少于两个'
					})
					return
				}
				this.data.question[i].optionItems.splice(j,1)
			},
			moveOption(i,j,k){
				let tmp = this.data.question[i].optionItems[j]
				if(k == -1){//向上移
					this.data.question[i].optionItems.splice(j-1,0,tmp)
					this.data.question[i].optionItems.splice(j+1,1)
				}
				else{//向下移
					this.data.question[i].optionItems.splice(j+2,0,tmp)
					this.data.question[i].optionItems.splice(j,1)
				}
			},
			editOption(i,j){
				this.currentQuestion = i // 待修改的问题
				this.currentOption = j // 待修改的选项
				this.optionPlaceholder = this.data.question[i].optionItems[j]
				this.$refs.optionDialog.open()
			},
			questionConfirm(done, val) {
				this.data.question[this.currentQuestion].questionTitle = val
				done()
			},
			optionConfirm(done, val){
				this.data.question[this.currentQuestion].optionItems.splice(this.currentOption,1,val)
				done()
			},
			submit(){
				if(!this.data.con){
					uni.showModal({
						content:'请确定一人最多投几票！'
					})
					return 
				}
				uni.setStorage({
				    key: 'vote',
				    data: JSON.stringify(this.data),
				})
				uni.navigateTo({
					url:'./addMember'
				})
			}
		}
	}
</script>

<style>
	page{
		background-color: #FFFAEE;
		/* background-image: linear-gradient(#FFFAEE, #ffe0c5); */
		font-family: 'Courier New', Courier, monospace;
		padding-bottom: 30px;
	}
	.iconfont {
		font-family: "iconfont" !important;
		font-size: 16px;
		font-style: normal;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
	}
	.input-item {
		height: auto;
		position: relative;
		height: 40px;
		margin: 0 5px;
		border-bottom: 1px solid #C0C0C0;
	}

	.input-item .title {
		position: absolute;
		top: 0;
		left: 0;
		width: 30%;
		height: 100%;
		text-align: center;
		line-height: 40px;
	}

	.input-item .input-content {
		position: absolute;
		top: 0;
		right: 0;
		width: 70%;
		height: 100%;
	}

	.input-item .input-content .text-input {
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}
	
	.max{
		/* border: 1px solid red; */
		margin: 10px 0;
		height: 100%;
		border-bottom: 1px solid #C0C0C0;
	}
	
	.content{
		margin: 10px;
		padding: 10px;
	}
	
	.content .content-title{
		padding-bottom: 10px;
		border-bottom: 1px solid #C0C0C0;
	}
	
	.question-item{
		margin: 10px 0;
		border-bottom: 1px solid #C0C0C0;
	}
	.question-option, .question-option-item{
		margin: 10px 0;
	}
	.addQ{
		float: right;
		color: #c2c2c2;
		font-size: 25px;
	}
	
	.operation-icon{
		font-family: "iconfont" !important;
		font-size: 20px;
		color: #c2c2c2;
		font-style: normal;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
		margin: 0 10px;
	}
	
	.radio-icon{
		font-family: "iconfont" !important;
		font-size: 20px;
		color: #666666;
		font-style: normal;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
		margin-right: 10px;
	}
	
	.footer {
		text-align: center;
		margin-bottom: 50px;
	}
	
	.footer view.iconfont{
		/* border: 1px solid red; */
		display: inline-block;
		height: 30px;
		width: 30px;
		line-height: 30px;
		font-size: 30px;
		border-radius: 50%;
		padding: 10px;
		background-color: #007AFF;
		color: #FFFFFF;
		margin: 10px;
		box-shadow: 5px 5px 5px #bdbdbd;
	} 
	
</style>
